<template>
  <n-layout style="margin-top: 20px;border-radius: 10px;border: 1px solid rgb(239, 239, 245);" >

    <n-layout has-sider sider-placement="right"  >
      <n-layout-content content-style="padding: 24px;">
          <n-thing style="width: 700px">
            <template #avatar>
              <div style="border-left: 2px solid #C10D0C;height: 60px"> </div>
            </template>
            <template  #header>
              <h2>{{ info.musicName }}</h2>
            </template>
            <template  #header-extra>
              <n-space>
                <n-button size="small" quaternary circle title="播放" @click="playMusic">
                  <template #icon>
                    <SIcon icon="PlayOutline"/>
                  </template>
                </n-button>
                <n-button size="small" quaternary circle title="添加到歌单" @click="addToSongList">
                  <template #icon>
                    <SIcon icon="DuplicateOutline"/>
                  </template>
                </n-button>
                <n-button size="small" quaternary circle @click="loveMusic">
                  <template #icon>
                    <SIcon :color="info.isLove === 1 ? 'red' : undefined"  :icon=" info.isLove === 1 ? 'HeartSharp' : 'HeartOutline'"/>
                  </template>
                </n-button>
              </n-space>
            </template>
            <template #description>
              <span> {{ info.singerVo?.name }}</span>
            </template>
            <n-image
                :width="700"
                :hidden="700"
                :src="info.picUrl || 'src/assets/img/longjuanfeng.jpg'"
            />
            <template  #footer>
              {{ info.intro }}
            </template>
          </n-thing>

        <n-thing class="tab_thing">

          <template  #header>
            评论
          </template>
        </n-thing>
        <n-grid x-gap="50" :cols="24" item-style="margin-top: 30px">
          <n-gi span="2">
            <n-avatar
                :size="75"
                :src="userInfo?.avatar"
                style="cursor: pointer;"
            />
          </n-gi>
          <n-gi span="22">
            <div style="width: 58%;">
              <n-input placeholder="评论" type="textarea" style="width: 90%"
                       v-model:value="content"
              />
              <n-button type="primary" style="float: right" @click="commentMusic">
                评论
              </n-button>
            </div>
          </n-gi>
        </n-grid>
        <n-thing class="tab_thing" style="padding-top: 20px">
          <template  #header>
            最新评论
          </template>
        </n-thing>
        <n-thing style="padding-top: 10px" content-indented v-for="(item) of commentList">
          <template  #avatar>
            <n-avatar
                :size="75"
                :src="item.userVo?.avatar"
                style="cursor: pointer;"
            />
          </template>
          <template  #header>
            <span style="color: #0086b3;font-size: 16px">{{ item.userVo?.name }}</span>
            <span>
              <SIcon :color="item.userVo?.sex===2?'#ffb5d3':'#26a6e4'" :icon="item.userVo?.sex===2?'Female':'Male'" />
            </span>:
            <span>{{ item.content }}</span>
          </template>
          <template #footer >
            <span style="padding-top: 0;color: #999999">
              {{ item.createTime }}
            </span>
            <span style="float: right;padding-right: 10px">
              <SIcon @click="addLikeCommentBy(item)" :color="getColor(item)" style="cursor: pointer;" :icon="getIconStr(item)"/> {{item.likeNum}}
            </span>
          </template>
        </n-thing>
      </n-layout-content>
      <n-layout-sider
          :width="240"
          bordered
      >
        <n-list clickable hoverable>
          <template #header>
            <h2 class="sidebar">最新单曲</h2>
          </template>
          <n-list-item v-for="item of musicList" @click="musicClick(item)" @contextmenu="(e)=>handleMusicMenu(e,item)">
            <template #prefix>
              <n-avatar
                  round
                  :size="48"
                  :src="item.picUrl || '/src/assets/img/109951163833244126.jpg'"
              />
            </template>
            <n-thing description-style="color: #B2B2B2;font-size: 12px"
                     :title="item.musicName"
                     :description="getDesc(item)">
            </n-thing>
          </n-list-item>
        </n-list>
        <n-list clickable hoverable>
          <template #header>
            <h2 class="sidebar">今日推荐</h2>
          </template>
          <n-list-item v-for="item of todayMusic" @click="musicClick(item)"  @contextmenu="(e)=>handleMusicMenu(e,item)">
            <template #prefix>
              <n-avatar
                  round
                  :size="48"
                  :src="item.picUrl || '/src/assets/img/109951163833244126.jpg'"
              />
            </template>
            <n-thing description-style="color: #B2B2B2;font-size: 12px"
                     :title="item.musicName"
                     :description="getDesc(item)">
            </n-thing>
          </n-list-item>
        </n-list>
      </n-layout-sider>

    </n-layout>
  </n-layout>
</template>
<script setup>
import {useRoute} from "vue-router";
import {
  addComment,
  addLikeComment,
  addLoveMusic,
  getMusicInfo,
  queryComment,
  queryMusicList
} from "@/api/music/musicApi";
import SIcon from "@/components/public/SIcon.vue";
import useMusicStore from "@/stores/admin/useMusicStore";
import useUserStore from "@/stores/admin/useUserStore";
import SFormUploadImg from "@/components/public/extForm/SFormUploadImg.vue";

const props = defineProps({
  openMySongList:Function,
  handleMusicMenu:Function
})

const {userInfo} = storeToRefs(useUserStore());
const route = useRoute();
const id = ref();
const info = ref({})
const commentList = ref([])
const content = ref()
onMounted(()=>{
  id.value = route.params.id
  getMusicInfo(route.params.id).then(res=>{
    info.value = res.data
  })
  getNewMusic()
  getTodayMusic()
  queryCommentByMusic()
})
function queryCommentByMusic(){
  queryComment(1,50,{musicId:id.value}).then(res=>{
    commentList.value = res.data?.records || []
  })
}
function getIconStr(item) {
  const {likeUserIds = []} = item
  if (userInfo.value?.id && likeUserIds && likeUserIds.indexOf(userInfo.value?.id) > -1){
    return 'icon-dianzan1'
  }else {
    return 'icon-dianzan'
  }
}

function getColor(item) {
  const {likeUserIds = []} = item
  if (userInfo.value?.id && likeUserIds && likeUserIds.indexOf(userInfo.value?.id) > -1){
    return '#e71313'
  }else {
    return '#2581de'
  }
}
function commentMusic(){
  if (!content.value || content.value.length < 1){
    return naive.message.warning("请输入评论内容");
  }
  let params = {
    musicId:id.value,
    content:content.value,
    type: 'music'
  }
  addComment(params).then(res => {
    content.value = ''
    queryCommentByMusic()
  })
}
function addLikeCommentBy(item){
  const {likeUserIds = []} = item
  let type = 'add'
  if (userInfo.value?.id && likeUserIds && likeUserIds.indexOf(userInfo.value?.id) > -1){
    type = 'remove'
  }
  let params = {
    commentId: item.id,
    type:type
  }
  addLikeComment(params).then(res=>{
    item.likeUserIds = res.data?.likeUserIds || []
    item.likeNum = res.data?.likeNum || 0;
  })
}
function playMusic(){
  useMusicStore().playMusic(info.value)
}
function addToSongList(){
  if (props.openMySongList){
    props.openMySongList(info.value)
  }
}
function loveMusic(){
  let type = 'add';
  if (info.value?.isLove){
    type = 'remove'
  }
  addLoveMusic({musicId:info.value.id,type:type}).then(res=>{
    info.value.isLove = res.data?.isLove || 0
  })
}
const musicList = ref([
])
const todayMusic = ref([
])
function musicClick(music){
  useMusicStore().playMusic(music);
}
const getDesc = (item)=>{
  return item?.singerVo?.name + ' / ' + item.playNum + '次播放'
}
function getNewMusic(){
  queryMusicList(1,6,{sortType:'creatTimeDesc'}).then(res=>{
    musicList.value = res.data?.records || []
  })
}
function getTodayMusic(){
  queryMusicList(1,6,{sortType:'day'}).then(res=>{
    todayMusic.value = res.data?.records || []
  })
}

</script>
<style>
.n-list__header{
  background-color: #fafafc;
  .sidebar{
  }
}
.tab_thing{
  border-bottom: 2px solid #C10D0C;
  &.no_one{
    padding-top: 40px;
  }
}
</style>
